<template>
    <view class="container">
        <!-- 公共标题区域 -->
        <view class="header">
            <view class="back-arrow iconfont icon-jiantou-copy" v-if="step > 1" @click="previousStep"></view>
            <text class="title">{{ stepTitles[step - 1] }}</text>
        </view>

        <!-- 步骤内容区域 -->
        <view class="content">
            <!-- 步骤1：性别与生日 -->
            <view v-if="step === 1" class="step">
                <view style="display: flex;flex-direction: column;">
                    <text class="subtitle">用心填写，为您更精准推荐</text>
                </view>
                <view class="gender-selection">
                    <!-- 男性图标 -->
                    <view :class="['gender', gender === '男' ? 'selected' : '']" @click="selectGender('男')">
                        <view class="iconfont gender-icon icon-men" :class="{ selected: gender === '男' }"></view>
                        <text class="gender-label" :class="{ selected: gender === '男' }">男</text>
                    </view>
                    <!-- 女性图标 -->
                    <view :class="['gender', gender === '女' ? 'selected' : '']" @click="selectGender('女')">
                        <view class="iconfont gender-icon icon-women" :class="{ selected: gender === '女' }"></view>
                        <text class="gender-label" :class="{ selected: gender === '女' }">女</text>
                    </view>
                </view>
                <view class="input-container">
                    <input class="input" v-model="name" placeholder="请输入您的昵称" />
                </view>
                <view class="picker-container">
                    <picker mode="date" v-model="birthDate" @change="updateDate" class="picker">
                        <view class="picker-text">{{ birthDate || '请选择您的生日' }}</view>
                    </picker>
                </view>
            </view>

            <!-- 步骤2：学历选择 -->
            <view v-if="step === 2" class="step">
                <view style="display: flex;flex-direction: column;">
                    <text class="subtitle">我将根据您的学历，给你推荐优秀的TA</text>
                </view>
                <view class="education-options">
                    <view v-for="level in educationLevels" :key="level"
                        :class="['education-option', selectedEducation === level ? 'selected' : '']"
                        @click="selectEducation(level)">
                        {{ level }}
                    </view>
                </view>
            </view>

            <!-- 步骤3：省市区选择 -->
            <view v-if="step === 3" class="step">
                <view style="display: flex; flex-direction: column;">
                    <text class="subtitle">我将根据您的位置，为您寻找同城的TA</text>
                </view>
                <picker mode="multiSelector" :range="regionData" :value="regionIndex" @change="handleRegionChange"
                    @columnchange="updateCityOptions" class="picker">
                    <view class="picker-text">{{ displayRegion }}</view>
                </picker>
            </view>

            <!-- 步骤4：照片上传 -->
            <view v-if="step === 4" class="step">
                <view>
                    <text class="subtitle">选择一张你的优质封面照</text>
                    <text class="instruction">优质的头像会让理想的TA更青睐～</text>
                </view>
                <view class="upload-area">
                    <view class="upload-placeholder" @click="showBottomSheet">
                        <image v-if="imageUrl" :src="imageUrl" class="preview" />
                        <view v-else class="icon-placeholder">
                            <view class="iconfont icon-xiangji"></view>
                        </view>
                    </view>
                    <button class="upload-btn" @click="showBottomSheet">去相册选照片</button>
                </view>
                <view class="recommendations">
                    <text class="recommendation-title">展示完美的你，会更受欢迎</text>
                    <view class="recommendation-cards">
                        <view class="card">
                            <image src="your_image_url_1" class="card-image" />
                            <text class="card-label">正面形象照</text>
                        </view>
                        <view class="card">
                            <image src="your_image_url_2" class="card-image" />
                            <text class="card-label">优雅华贵照</text>
                        </view>
                        <view class="card">
                            <image src="your_image_url_3" class="card-image" />
                            <text class="card-label">气质写真照</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部按钮和进度条 -->
        <view class="footer">
            <button class="next-btn" @click="step < 4 ? nextStep() : submitForm()">{{ step < 4 ? '下一步' : '完成'
                    }}</button>
                    <text class="progress-text">{{ step }}/4</text>
        </view>

        <!-- 底部弹窗 -->
        <view class="bottom-sheet" v-if="isBottomSheetVisible" @click="hideBottomSheet">
            <view class="bottom-sheet-content" @click.stop>
                <button class="bottom-option" @click="chooseFromAlbum">从相册选择</button>
                <button class="bottom-option" @click="takePhoto">拍摄</button>
                <button class="bottom-option cancel" @click="hideBottomSheet">取消</button>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                step: 1,
                gender: '',
                name: '',
                birthDate: '',
                educationLevels: ['博士后','博士','硕士','本科','大专','中专以下'],
                selectedEducation: '',
                regionData: [],
                regionIndex: [0,0],
                displayRegion: '请选择省市区',
                provinceCities: {
                    北京: ['朝阳区','海淀区','西城区','东城区'],
                    上海: ['黄浦区','徐汇区','长宁区'],
                    广东: ['广州市','深圳市','珠海市'],
                },
                imageUrl: '',
                isBottomSheetVisible: false, // 控制底部弹窗
                stepTitles: ['Hey~','请选择您的学历','您的居住地在哪里？','选择一张你的优质封面照'],
            };
        },
        created() {
            const provinces = Object.keys(this.provinceCities);
            this.regionData = [provinces,this.provinceCities[provinces[0]]];
        },
        methods: {
            nextStep() {
                if (this.step < 4) this.step++;
            },
            previousStep() {
                if (this.step > 1) this.step--;
            },
            selectGender(gender) {
                this.gender = gender;
            },
            selectEducation(level) {
                this.selectedEducation = level;
            },
            handleRegionChange(e) {
                const [provinceIndex,cityIndex] = e.detail.value;
                const provinces = Object.keys(this.provinceCities);
                const selectedProvince = provinces[provinceIndex];
                const selectedCity = this.provinceCities[selectedProvince][cityIndex];
                this.displayRegion = `${selectedProvince}-${selectedCity}`;
            },
            updateCityOptions(e) {
                const column = e.detail.column;
                const value = e.detail.value;
                if (column === 0) {
                    const provinces = Object.keys(this.provinceCities);
                    const selectedProvince = provinces[value];
                    this.regionData[1] = this.provinceCities[selectedProvince];
                    this.regionIndex = [value,0];
                }
            },
            chooseImage() {
                uni.chooseImage({
                    count: 1,
                    success: (res) => {
                        this.imageUrl = res.tempFilePaths[0];
                    },
                });
            },
            updateDate(e) {
                this.birthDate = e.detail.value;
            },
            submitForm() {
                console.log('提交数据：',{
                    gender: this.gender,
                    name: this.name,
                    birthDate: this.birthDate,
                    education: this.selectedEducation,
                    region: this.displayRegion,
                    imageUrl: this.imageUrl,
                });
                uni.showToast({ title: '提交成功',icon: 'success' });
            },
            showBottomSheet() {
                this.isBottomSheetVisible = true;
            },
            hideBottomSheet() {
                this.isBottomSheetVisible = false;
            },
            chooseFromAlbum() {
                uni.chooseImage({
                    count: 1,
                    sourceType: ['album'],
                    success: (res) => {
                        this.imageUrl = res.tempFilePaths[0];
                        this.hideBottomSheet();
                    },
                });
            },
            takePhoto() {
                uni.chooseImage({
                    count: 1,
                    sourceType: ['camera'],
                    success: (res) => {
                        this.imageUrl = res.tempFilePaths[0];
                        this.hideBottomSheet();
                    },
                });
            },
        },
    };
</script>

<style>
    .container {
        height: 100vh;
        background-color: #fff;
        padding: 40rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

    .header {
        width: 100%;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding-bottom: 20rpx;
    }

    .back-arrow {
        position: absolute;
        left: 20rpx;
        font-size: 48rpx;
        color: #333;
    }

    .title {
        font-size: 48rpx;
        color: #333;
        font-weight: bold;
    }

    .content {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }

    .subtitle {
        text-align: center;
        font-size: 28rpx;
        color: #999;
        margin-bottom: 40rpx;
    }

    .instruction {
        text-align: center;
        font-size: 28rpx;
        color: #999;
        margin-bottom: 40rpx;
    }

    .gender-selection {
        display: flex;
        justify-content: center;
        gap: 120rpx;
        margin-bottom: 60rpx;
    }

    .gender {
        text-align: center;
        color: #666;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .gender-icon {
        width: 200rpx;
        height: 200rpx;
        border: 6rpx solid #ddd;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 120rpx;
        transition: all 0.3s ease;
    }

    .gender-icon.selected {
        background-color: #7d70f4;
        color: #fff;
        border-color: #7d70f4;
    }

    .gender-label {
        font-size: 36rpx;
        font-weight: bold;
        color: #666;
    }

    .gender-label.selected {
        color: #7d70f4;
    }

    .input-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 40rpx;
    }

    .input {
        width: 80%;
        height: 100rpx;
        padding: 0 20rpx;
        border: 2rpx solid #ddd;
        border-radius: 10rpx;
        font-size: 32rpx;
    }

    .picker-container {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 40rpx;
    }

    .picker {
        width: 80%;
        height: 100rpx;
        border: 2rpx solid #ddd;
        border-radius: 10rpx;
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        font-size: 32rpx;
    }

    .picker-text {
        font-size: 32rpx;
        color: #666;
    }

    .education-options {
        display: flex;
        flex-direction: column;
        gap: 20rpx;
        width: 100%;
        align-items: center;
    }

    .education-option {
        width: 80%;
        padding: 24rpx 0;
        text-align: center;
        border-radius: 50rpx;
        border: 2rpx solid #ddd;
        background-color: #f9f9f9;
        color: #666;
        font-size: 32rpx;
        transition: all 0.3s ease;
    }

    .education-option.selected {
        background-color: #7d70f4;
        color: #fff;
        font-weight: bold;
        border: none;
    }

    .upload-area {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 40rpx;
    }

    .upload-placeholder {
        width: 200rpx;
        height: 200rpx;
        border: 2rpx dashed #ddd;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20rpx;
        background-color: #f9f9f9;
        position: relative;
    }

    .icon-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 80rpx;
        color: #bbb;
    }

    .preview {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
    }

    .upload-btn {
        background: #7d70f4;
        color: #fff;
        padding: 20rpx 40rpx;
        font-size: 32rpx;
        border-radius: 40rpx;
        text-align: center;
    }

    .recommendation-title {
        text-align: center;
        font-size: 28rpx;
        color: #666;
        margin-bottom: 20rpx;
    }

    .recommendation-cards {
        display: flex;
        justify-content: space-around;
        gap: 20rpx;
    }

    .card {
        width: 180rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .card-image {
        width: 180rpx;
        height: 180rpx;
        border-radius: 10rpx;
        object-fit: cover;
        margin-bottom: 10rpx;
    }

    .card-label {
        font-size: 24rpx;
        color: #666;
        text-align: center;
    }

    .footer {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .next-btn {
        background: linear-gradient(90deg, #7d70f4, #a890f9);
        color: white;
        text-align: center;
        padding: 20rpx 0;
        width: 100%;
        font-size: 32rpx;
        font-weight: bold;
        border-radius: 40rpx;
        margin-top: 40rpx;
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
    }

    .progress-text {
        text-align: center;
        font-size: 28rpx;
        color: #999;
        margin-top: 20rpx;
    }

    .bottom-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: flex-end;
    }

    .bottom-sheet-content {
        background-color: #fff;
        width: 100%;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        overflow: hidden;
    }

    .bottom-option {
        padding: 20rpx 0;
        text-align: center;
        font-size: 32rpx;
        color: #7d70f4;
        border-bottom: 1rpx solid #ddd;
    }

    .bottom-option.cancel {
        color: #333;
    }
</style>